<template>
	<xn-form-container title="预测外呼复制" :width="400" :visible="visible" :destroy-on-close="true" @close="onClose">
		<a-form ref="formRef" :model="formData" :rules="formRules">
			<a-form-item label="任务名称" name="batchName">
				<a-input
					v-model:value="formData.batchName"
					placeholder="请输入任务名称"
					maxlength="10"
					enter-button
					allowClear
				/>
			</a-form-item>
			<a-form-item label="主叫号码" name="callNumber">
				<a-select v-model:value="formData.callNumber" placeholder="请选择主叫号码">
					<a-select-option
						@click="changeCallNumber(item.ZCallerName)"
						v-for="item in callerNumberList"
						:key="item.ZCallerName"
						:value="item.ZCaller"
						>{{ item.ZCallerName }}
					</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item label="并发数量" name="callThread">
				<a-select v-model:value="formData.callThread" placeholder="请选择并发数" :options="callThreadOptions" />
			</a-form-item>
			<a-form-item label="过滤名单" name="filterType">
				<a-row>
					<a-col :span="10">
						<a-checkbox v-model:checked="a" disabled class="checkbox-item">投诉用户</a-checkbox>
					</a-col>
					<a-col :span="14"></a-col>
				</a-row>
				<a-row>
					<a-col :span="10">
						<a-radio-group v-model:value="formData.filterType" @change="changFilterType">
							<a-radio :value="0">无</a-radio>
							<a-radio :value="1">已接听</a-radio>
							<a-radio :value="2">已拨打</a-radio>
						</a-radio-group>
					</a-col>
					<a-col :span="14"> 预计过滤{{ filterCount }}个 </a-col>
				</a-row>
			</a-form-item>
		</a-form>
		<br />
		<p>使用说明：</p>
		<p>1、复制功能的使用场景：希望重新拨打当前批次名单，但是又不想重新制作Excel表格上传；</p>
		<p>2、会复制当前批次的全部信息，包括姓名、手机号、自定义信息，但是会默认过滤掉投诉用户和已接通的手机号；</p>
		<template #footer>
			<a-button class="xn-mr8" @click="onClose">关闭</a-button>
			<a-button :loading="uploadLoading" type="primary" @click="onSubmit">保存</a-button>
		</template>
	</xn-form-container>
</template>

<script setup>
	import tool from '@/utils/tool'
	import htWebCall from '@/plugins/htWebCall'
	import { required } from '@/utils/formRules'
	import { message } from 'ant-design-vue'
	import predictCallApi from '@/api/tjzy/call/predict/predictCallApi'
	// 默认是关闭状态
	const visible = ref(false)
	const emit = defineEmits({ successful: null })
	const formRef = ref()
	// 表单数据
	const formData = ref({
		batchNumber: undefined,
		batchName: undefined,
		callNumber: undefined,
		callName: undefined,
		filterType: 1,
		callThread: '2'
	})
	const taskId = ref()
	const formRules = {
		batchName: [required('请输入任务名称')],
		callNumber: [required('请选择主叫号码')],
		filterType: [required('请选择是否过滤已接听')],
		callThread: [required('请选择并发数')]
	}

	const a = true
	const filterCount = ref(0)
	const uploadLoading = ref(false)
	const callerNumberList = ref([])
	const filterKey = ref(['智能路由'])
	const callThreadOptions = tool.dictList('CallThread')
	// 打开抽屉
	const onOpen = (record) => {
		visible.value = true
		formData.value.batchNumber = record.batchNumber
		taskId.value = record.taskId
		predictCallApi.getCallCount(taskId.value, formData.value.filterType).then((res) => {
			filterCount.value = res
		})
	}
	// 关闭抽屉
	const onClose = () => {
		formRef.value.resetFields()
		visible.value = false
	}

	const changeCallNumber = (callName) => {
		formData.value.callName = callName
	}
	const changFilterType = () => {
		predictCallApi.getCallCount(taskId.value, formData.value.filterType).then((res) => {
			filterCount.value = res
		})
	}
	// 验证并提交数据
	const onSubmit = () => {
		formRef.value.validate().then(() => {
			uploadLoading.value = true
			predictCallApi
				.copyPreOutCallDetail(formData.value)
				.then((res) => {
					emit('successful')
					message.success('复制完成\n' + res)
				})
				.finally(() => {
					onClose()
					uploadLoading.value = false
				})
		})
	}
	onMounted(() => {
		setTimeout(() => {
			callerNumberList.value = htWebCall.callerNumberList.value.filter((item) => {
				return filterKey.value.some((key) => item.ZCallerName.includes(key))
			})
		}, 2000)
	})
	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		onOpen
	})
</script>
